<template>
<div class="adoptedDetails" v-if="info">
  <div class="adopt-content">
    <el-tabs tab-position="left">
      <el-tab-pane label="信息">
        <adopted-info :adopted-id="adoptedId" :info="info" :is-edit="isEdit"></adopted-info>
      </el-tab-pane>
      <el-tab-pane label="动态">
        <adopted-trends :adopted-id="adoptedId" :is-edit="isEdit"></adopted-trends>
      </el-tab-pane>
      <el-tab-pane label="指标">
        <adopted-index :adopted-id="adoptedId" :is-edit="isEdit"></adopted-index>
      </el-tab-pane>
      <el-tab-pane label="相册">
        <adopted-image :adopted-id="adoptedId" :is-edit="isEdit"></adopted-image>
      </el-tab-pane>
      <el-tab-pane label="视频">
        <adopted-video :adopted-id="adoptedId" :is-edit="isEdit"></adopted-video>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
</template>

<script>
import adoptedInfo from "@/views/adopted/adoptedDetails/adoptedInfo";
import adoptedTrends from "./adoptedTrends";
import adoptedIndex from "./adoptedIndex";
import adoptedImage from "./adoptedImage";
import adoptedVideo from "./adoptedVideo";
export default {
  name: "adoptedDetails",
  components: { adoptedInfo, adoptedTrends, adoptedIndex, adoptedImage, adoptedVideo },
  inject: ['getVarietyName', 'getDictNameSync'],
  props: {
    adoptedId: String,
    isEdit: Boolean
  },
  data(){
    return{
      info: null
    }
  },
  created(){
    this.initInfo();
  },
  methods:{
    initInfo(){
      this.$yAxios({
        url: this.$api.adopted.queryAdopted,
        data:{
          id: this.adoptedId
        },
        loading: true
      }, info => {
        this.$set(this, 'info', info);
      })
    },
    close(){
      this.$emit('close');
    }
  }
}
</script>

<style scoped lang="less">
.adoptedDetails{
  width: 100%;
  height: 100%;
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  .adopt-content{
    flex-grow: 2;
    overflow-x: hidden;
    padding: 20px 0 10px;
    >.el-tabs{
      height: 100%;
      /deep/ .el-tabs__content{
        height: 100%;
        overflow-y: auto;
      }
    }
  }
  .adopted-buttons{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    >.el-button{
      min-width: 104px;
    }
  }
}
</style>